<template>
	<div class="manage">
		<el-dialog :title="operateType === 'add' ? '新增菜单' : '更新菜单'" :visible.sync="isShow" width="680px">
			<el-form model="operateForm" inline="inline"  label-width="100px">
			<el-form-item label="上级菜单">
			  <treeselect style="width: 500px;"
			    v-model="operateForm.parentId"
			    :options="menuOptions"
			    :normalizer="normalizer"
				:show-count="true"
			    placeholder="选择上级菜单"
			  />
			</el-form-item>
			<el-form-item label="菜单名称">
				<el-input placeholder="请输入菜单名称" v-model="operateForm.menuName"></el-input>
			</el-form-item>
			<el-form-item label="图标">
				<el-input placeholder="请输入图标" v-model="operateForm.icon"></el-input>
			</el-form-item>
			<el-form-item label="组件名">
				<el-input placeholder="请输入组件名" v-model="operateForm.component"></el-input>
			</el-form-item>
			<el-form-item label="路由地址">
				<el-input placeholder="请输入路由地址" v-model="operateForm.path"></el-input>
			</el-form-item>
			<el-form-item label="权限标识">
				<el-input placeholder="请输入权限标识" v-model="operateForm.perms"></el-input>
			</el-form-item>
			<el-form-item label="序号">
				<el-input placeholder="请输入序号" v-model="operateForm.orderNum"></el-input>
			</el-form-item>			
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm">确定</el-button>
				<el-button @click="isShow = false">取消</el-button>
			</div>
		</el-dialog>
		<div class="manage-header">
			<el-form style="width: 100%;" label-width="100px" :model="searchForm" ref="sform" inline>
				<el-button type="success" plain @click="addHandler(0)" size="mini">+ 新增</el-button>
				<el-button type="warning" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
				<div style="float: right;">
					<el-form-item label="菜单名称">
						<el-input size="mini" v-model="searchForm.menuname" placeholder="请输入菜单名称" clearable></el-input>
					</el-form-item>
					<el-button size="mini" style="vertical-align: sub;" type="primary" @click="getList(searchForm.menuname)">搜索</el-button>
				</div>
			</el-form>
		</div>
		<el-table
		  v-if="refreshTable"
		  :data="tableData"
		  row-key="menuId"
		  :default-expand-all="isExpandAll"
		  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
		>
		<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="200"></el-table-column>
		<el-table-column prop="orderNum" label="序号" align="center" width="100"></el-table-column>
		<el-table-column prop="icon" label="图标" align="center" width="100"></el-table-column>
		<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
		<el-table-column prop="component" label="组件名" :show-overflow-tooltip="true"></el-table-column>
		<el-table-column prop="path" label="路径" :show-overflow-tooltip="true"></el-table-column>
		<el-table-column label="操作" align="center">
		    <template slot-scope="scope">
				 <el-button 
					size="mini"
					type="text"
					icon="el-icon-edit"
					@click="handleUpdate(scope.row)"
				  >修改</el-button>
				  <el-button
					size="mini"
					type="text"
					icon="el-icon-plus"
					@click="handleAdd(scope.row)"
				  >新增</el-button>
				  <el-button
					size="mini"
					type="text"
					icon="el-icon-delete"
					@click="handleDelete(scope.row)"
				  >删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
	</div>
</template>

<script>
	import CommonForm from '/src/components/CommonForm.vue'
	import CommonTable from '/src/components/CommonTable.vue'
	import { getMenuList,addMenu,updateMenu,delMenu } from '/api/menuapi.js'
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import { handleTree } from '/utils/listUtils.js'

	export default {
		name: 'menu',
		components:{
			CommonForm,
			CommonTable,
			Treeselect
		},

		data(){
			return {
				operateType: 'add',
				isShow: false,
				operateForm:{
					parentId: 0,
					menuName: '',
					icon: '',
					component: '',
					path: '',
					perms: '',
				},
				searchForm:{
					menuName: '',
				},
				// 是否展开，默认全部折叠
				isExpandAll: false,
				// 重新渲染表格状态
				refreshTable: true,
				// 菜单树选项
				menuOptions: [],
				tableData: [],
			
			}
		},
		methods:{
			//后台返回的menu表格数据转换为TreeList树形列表数据
			menuTreeData(list){
				function getChildMenu(item,list){
					// console.log(item,'getChildMenu')
					let sublist = list.filter(s=>{
						if(s.parentId != item.menuId) return false
						return true
					})
					// console.log(JSON.stringify(item) + ' 子节点数：' + sublist.length)
					if(sublist.length>0)
					{
						sublist.forEach(t=>{
							getChildMenu(t,list)
						})
						item.children = sublist
						// console.log(JSON.stringify(item),'添加完节点后')
					}
				}
				let r = []
				list.forEach(t=>{
					if(t.parentId == 0 && t.menuName != '首页'){
						// console.log(t.menuName,'menuTreeData main')
						getChildMenu(t,list)
						r.push(t)
					}
				})
				// console.log(JSON.stringify(r),'最终结果')
				if(r.length == 0){
					r = list
				}
				return r;
			},
			getList(menuName=''){
				getMenuList({
					menuName: menuName
				}).then( res =>{
					let data = res.data;
					// console.log(data.data)
					this.tableData = this.menuTreeData(data.data)
				})
			},
			addHandler(pid=0){
				this.getTreeselect()
				this.isShow = true
				this.operateType = 'add'
				this.operateForm = {
					menuName: '',
					icon: '',
					component: '',
					path: '',
					perms: '',
					parentId: pid
				}
			},
			confirm(){
				if(this.operateType === 'edit'){
					updateMenu(this.operateForm).then(res => {
						// console.log(res,'updateMenu')
						this.isShow=false
						this.getList()
					})
				}
				else{
					addMenu(this.operateForm).then(res => {
						// console.log(res,'addMenu')
						this.isShow=false
						this.getList()
					})
				}
			},
			normalizer(node) {
			  if (node.children && !node.children.length) {
			    delete node.children;
			  }
			  return {
			    id: node.menuId,
			    label: node.menuName,
			    children: node.children
			  };
			},
			getTreeselect() {
			  getMenuList().then(response => {
				    // alert(JSON.stringify(response.data.data))
					this.menuOptions = [];
					const menu = { menuId: 0, menuName: '主类目', children: [] };
					// alert(JSON.stringify(menu))
					menu.children = handleTree(response.data.data, "menuId","parentId","children");
					// alert(JSON.stringify(menu.children))
					this.menuOptions.push(menu);
					
			  });
			},
			handleAdd(row){
				this.getTreeselect();
				this.addHandler(row.menuId)
			},
			handleUpdate(row){
				this.isShow = true
				this.operateType = 'edit'
				this.operateForm = row
				this.getTreeselect();
			},
			handleDelete(row){
				this.$confirm("即将删除该菜单，是否继续？", "提示",{
					confirmButtonText: "确认",
					cancelButtonText: "取消",
					type: "warning"
				}).then(()=>{
					const id = row.menuId
					delMenu(id).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功'
						})
						this.getList()
					})
				})
			},
			toggleExpandAll() {
			  this.refreshTable = false;
			  this.isExpandAll = !this.isExpandAll;
			  this.$nextTick(() => {
			    this.refreshTable = true;
			  });
			},
		},
		created(){
			this.getList()
		}
	}
</script>

<style>
</style>
